<template>
	<view class="page-wrap" id="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom
			:isBlur="true"
			:isBg="false"
			:isCircle="true"
			:isSpace="false"
			linkId="usr133kn5vl09lqk"
			:linkData="linkData"
		></HeadCustom>
		<scroll-view
			:scroll-with-animation="true"
			@scroll="scrollDd"
			@scrolltolower="scrolltobottom"
			scroll-y
			id="scroll"
			class="scroll"
			:scroll-into-view="toView"
			:style="{ height: scrollHeight + 'px' }"
		>
			<!-- #ifndef MP-TOUTIAO -->
			<view class="spaceBar" :style="{ height: statusBarHeight + 'px' }"></view>
			<view style="height: 90rpx" id="space-top"></view>
			<!-- #endif -->

			<view class="dynamic-info">
				<view class="hd fboxRow Ycenter">
					<image class="img1" mode="aspectFill" round :src="detail.avatar" />
					<view class="fboxCol flex1">
						<view class="name font-ell1 fboxRow Ycenter font30 lh44">
							{{ detail.realName }}
						</view>
						<view
							class="job font-w300 font-ell1 color-6B707C font26 lh38"
							v-if="detail.memberPositionName || detail.memberCompanyName"
						>
							{{ detail.memberPositionName || '' }}
							<text
								v-if="detail.memberCompanyName && detail.memberPositionName"
								class="space-line"
							></text>
							{{ detail.memberCompanyName || '' }}
						</view>
					</view>
					<view
						v-if="userInfo.memberId != detail.memberId"
						@tap="attention(detail.isFollow)"
						class="right fboxRow Ycenter Xcenter font24 btn1 tw"
					>
						{{ detail.isFollow == 0 ? '+关注' : '已关注' }}
					</view>
				</view>
				<view class="bd mt24">
					<view
						class="content font32"
						v-if="detail.dynamicContent"
						v-html="whiteUrlCon(detail.dynamicContent)"
						style="white-space: pre-wrap"
					></view>
					<!-- 图片区域 -->
					<view class="imageList mt24 ui-flex ui-ac ui-warp">
						<template
							v-if="
								detail.picture &&
								detail.picture.length > 1 &&
								detail.pictureType == 1
							"
						>
							<image
								v-for="(item, index) in detail.picture"
								:key="index"
								:class="[(index + 1) % 3 === 0 ? 'mr0' : '', 'minImg']"
								mode="aspectFill"
								round
								@click="picPreview(detail.picture, index)"
								:src="item"
							/>
						</template>
						<template
							v-else-if="
								detail.picture &&
								detail.picture.length == 1 &&
								detail.pictureType == 1
							"
						>
							<image
								@click="picPreview(detail.picture, 0)"
								:style="{
									width: detail.width ? detail.width : '',
									height: detail.height ? detail.height : ''
								}"
								class="maxImg"
								mode="widthFix"
								radius="12"
								:src="detail.picture[0]"
							/>
						</template>
						<template v-else-if="detail.pictureType == 2 || detail.pictureType == 3">
							<!-- 全屏播放事件以及按钮 -->
							<!-- @fullscreenchange="fullscreenchange"
							:show-fullscreen-btn="false" -->

							<video
								class="max-pic"
								:src="detail.picture[0]"
								:poster="detail.coverURL"
								object-fit="cover"
							></video>
							<!-- <video class="max-pic" :src="detail.picture[0]" :poster="detail.coverURL" object-fit="contain"></video> -->
						</template>
						<template v-if="detail.dynamicForwardId">
							<view class="dynamicForward fboxRow Ycenter bg-21242C">
								<image
									class="pic"
									:src="detail.pictureForward"
									mode="aspectFill"
								></image>
								<view class="fboxCol flex1 font28 con font-ell2 lh38">
									{{ detail.dynamicForwardContent }}
								</view>
							</view>
						</template>
					</view>

					<view class="topic-tag mt24 fboxWrap">
						<view
							class="tag-groups tag1 fboxRow Ycenter Xcenter font24"
							v-if="detail.topicTitle"
							@tap="goTotic()"
						>
							<text class="bw-a-zu3303 bwfont" style="margin-right: 10rpx"></text>
							{{ detail.topicTitle }}
						</view>
						<template v-if="detail.listTopicVO && detail.listTopicVO.length">
							<view
								class="tag-groups tag1 fboxRow Ycenter Xcenter font24"
								v-for="(item, index) in detail.listTopicVO"
								:key="index"
								@click="goTotic(item.topicId)"
							>
								<text class="bwfont bw-a-zu3303" style="margin-right: 10rpx"></text>
								{{ item.topicTitle }}
							</view>
						</template>
						<view
							class="tag-groups tag2 fboxRow Ycenter Xcenter font24"
							v-if="detail.groupName"
							@tap="goCircle"
						>
							<text class="bw-a-zu3306 bwfont" style="margin-right: 10rpx"></text>
							{{ detail.groupName }}
						</view>
					</view>
				</view>
				<view class="ft fboxRow Ycenter font24">
					<view class="flex1 dynamic-time">{{ dateFormat(detail.gmtCreate) }}</view>
					<view class="fboxRow Ycenter ml24">
						<text class="bwfont bw-Vector2"></text>
						<text class="time">
							{{
								detail.browseCount > 10000
									? (detail.browseCount / 10000).toFixed(1) + 'W'
									: detail.browseCount || '浏览'
							}}
						</text>
					</view>
					<!-- <view class="fboxRow Ycenter ml24" @tap.stop="goPage('dynamicDetails')">
						<text class="bwfont bw-a-zu3304"></text>
						<text class="time">{{ detail.commentNum > 10000 ? (detail.commentNum / 10000).toFixed(1) + 'W' : detail.commentNum || '评论' }}</text>
					</view>
					<view class="fboxRow Ycenter ml24" @click="likeTap">
						<text  class="bwfont bw-Vector3" :style="{color: detail.isLike ? '#E8CDA7' : ''}" ></text>
						<text class="time">{{ detail.likeNum > 10000 ? (detail.likeNum / 10000).toFixed(1) + 'W' : detail.likeNum || '点赞' }}</text>
					</view> -->
				</view>
			</view>
			<view class="space-back"></view>

			<Comments
				id="space-back"
				@fbContent="fbContent"
				@puperBounced="puperBounced"
				:list="comments"
				:userId="userInfo.memberId"
				:commentNum="detail.commentNum"
				:likeNum="detail.likeNum"
				:forwardNum="detail.forwardNum"
			/>
			<u-loadmore fontSize="24rpx" v-if="isShow" :status="listConfig.loading" />
			<view style="height: 40rpx; width: 100%"></view>
			<!-- 评论，浏览，点赞人数 -->
			<!-- 
			<view class="tabs-nav fboxRow Ycenter">
				<view class="tabs-item fboxRow Ycenter font32" 
				v-for="(item, index) in navList" :class="{active: navIndex == index}" :key="index"
				@tap="navTap(item, index)">{{item.title}}<text class="font24">({{ detail[item.key] > 10000 ? (detail[item.key] / 10000).toFixed(1) + 'W' : detail[item.key]}})</text></view>
			</view>
			<template v-if="navIndex == 0">
				<Comments
					id="space-back"
					@fbContent="fbContent"
					@puperBounced="puperBounced"
					:list="comments"
					:userId="userInfo.memberId"
					:commentNum="detail.commentNum"
					:likeNum="detail.likeNum"
					:forwardNum="detail.forwardNum"
					:isHead="false"
				/>
				<u-loadmore fontSize="24rpx" v-if="isShow" :status="listConfig.loading" />
			</template>
			<view class="userCount" v-if="navIndex != 0">
				<view class="user-item fboxRow Ycenter" v-for="(item, index) in userList" :key="index" @tap="goCard(item)">
					<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
					<view class="fboxCol">
						<view class="name lh44 font32">{{item.realName}}</view>
						<view class="time lh40 font28">{{item.gmtCreate}}</view>
					</view>
				</view>
				<view style="height: 60rpx;" v-if="!userList.length"></view>
				<u-loadmore fontSize="24rpx" :status="userPage.loading" />
			</view> -->
		</scroll-view>

		<!-- #ifdef H5 -->
		<u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
			<view
				class="fboxRow Ycenter uTabbarBto"
				id="uTabbarBto"
				style="width: 100%; height: 100rpx"
			>
				<view class="ipt_box" @tap="openComments"><text>发表评论</text></view>
				<view class="cz_right fboxRow Ycenter flex1">
					<!-- 评论 -->
					<view class="fboxCol flex1 Ycenter action-item">
						<text class="bw-a-1 bwfont font30" @tap="scrollChange"></text>
						<text class="num font24">
							{{ formDataNum(detail.commentNum) || '评论' }}
						</text>
					</view>
					<!-- 收藏 -->
					<view
						@tap="collectionDd"
						class="fboxCol flex1 Ycenter action-item"
						:class="{ on: detail.isCollection != 0 }"
					>
						<text
							:class="{
								'bw-a-ziyuan11': detail.isCollection == 0,
								'bw-a-ziyuan1': detail.isCollection != 0
							}"
							class="bwfont font30"
						></text>
						<text class="num font24">
							{{ formDataNum(detail.collectionCount) || '收藏' }}
						</text>
					</view>
					<!-- 点赞 -->
					<view
						class="fboxCol flex1 Ycenter action-item"
						@tap="isLink"
						:class="{ on: detail.isLike != 0 }"
					>
						<text
							:class="{
								'bw-weidianzan': detail.isLike == 0,
								'bw-dianzan': detail.isLike != 0
							}"
							class="bwfont font30"
						></text>
						<text class="num font24">{{ formDataNum(detail.likeNum) || '点赞' }}</text>
					</view>
				</view>
			</view>
		</u-tabbar>
		<u-overlay :show="plShow" @click="closePuperBottom"></u-overlay>
		<view class="puper_bottom" v-if="plShow">
			<view>
				<u--textarea
					class="text_box"
					style="border: none"
					v-model="plContent"
					:placeholder="placeholderContent"
				></u--textarea>
			</view>
			<u-button
				@click="fbMyContent"
				class="btn bg-linear"
				type="primary"
				text="发布"
			></u-button>
		</view>
		<!-- #endif -->
		<not-login ref="notLogin" />
	</view>
</template>

<script>
import Comments from '@/components/circle/comments.vue';
import { dateFormat, whiteUrlCon } from '@/static/js/common.js';
import {
	getDynamicDetails,
	getDynamicBrowse,
	getDynamicLike,
	circleLikeV2,
	collectioncCancel,
	collectionCard,
	circleUnlikeV2,
	addAttention,
	getDynamicComments,
	commentReply,
	manageAttention,
	addComment
} from '@/api/h5.js';
export default {
	components: {
		Comments
	},
	data() {
		return {
			dateFormat,
			whiteUrlCon,
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			statusBarHeight: getApp().globalData.statusBarHeight,
			detail: {},
			toView: '',
			id: '',
			listConfig: {
				loading: ''
			},
			comments: [],
			userInfo: {},
			plShow: false,
			scrollTop: 0,
			plContent: '',
			plDetail: {},
			isShow: false,
			fbType: false,
			placeholderContent: '请发表优质评论！',
			page: {
				current: 1,
				size: 20,
				total: 0
			},
			linkData: {
				id: ''
			},
			scrollHeight: 0,
			navIndex: 0,
			navList: [
				{ title: '评论', key: 'commentNum' },
				{ title: '浏览', key: 'browseCount' },
				{ title: '点赞', key: 'likeNum' }
			],
			// 浏览，点赞列表数据
			userList: [],
			userPage: {
				current: 1,
				size: 20,
				total: 0,
				loading: 'loading'
			}
		};
	},
	onLoad(option) {
		if (uni.getStorageSync('bw_user_temp')) {
			this.userInfo = JSON.parse(uni.getStorageSync('bw_user_temp'));
		}
		if (option && option.id) {
			this.id = option.id;
			this.linkData.id = option.id;
			this.getDetail();
			this.getComments();
			uni.showLoading({
				mask: true,
				title: '加载中...'
			});
		}
		uni.setNavigationBarTitle({
			title: `点点详情`
		});
	},
	created() {
		this.statusBarHeight = getApp().globalData.statusBarHeight;
		if (!getApp().globalData.statusBarHeight) {
			const sys = uni.getSystemInfoSync();
			this.statusBarHeight = sys.statusBarHeight;
		}
		// #ifdef MP
		// 根据胶囊按钮距离， 设置导航高度
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		this.statusBarHeight = menuButtonInfo.top;
		// #endif
	},
	onReady() {
		// #ifdef H5
		uni.createSelectorQuery()
			.selectAll('#uTabbarBto')
			.boundingClientRect((res) => {
				const h1 = res.find((item) => item.id == 'uTabbarBto');
				uni.getSystemInfo({
					success: (sys) => {
						let height = sys.windowHeight;
						this.scrollHeight = height - h1.height;
					}
				});
			})
			.exec();
		// #endif
		// #ifdef MP
		uni.getSystemInfo({
			success: (sys) => {
				let height = sys.windowHeight;
				console.log('========hright=========', sys);
				this.scrollHeight = sys.safeArea.height;
			}
		});
		// #endif
	},
	onPullDownRefresh() {
		this.page.size = 20;
		this.getComments();
		this.getDetail();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		// 处理图片大小
		getImgData() {
			const _this = this;
			uni.getImageInfo({
				src: this.detail.pictures[0],
				success: (res) => {
					// 300 : 200
					if (res.width < res.height) {
						const height = 300;
						const width = res.width * (height / res.height);
						this.$set(this.detail, 'height', height + 'px');
						this.$set(this.detail, 'width', width + 'px');

						// const width = 300;
						// const height = res.height * (width / res.width);
						// this.$set(this.detail, 'height', height + 'px');
						// this.$set(this.detail, 'width', width + 'px');
					} else {
						// const height = 300;
						// const width = res.width * (height / res.height);
						// this.$set(this.detail, 'height', height + 'px');
						// this.$set(this.detail, 'width', width + 'px');
					}
				}
			});
		},
		scrolltobottom(e) {
			if (this.navIndex != 0) {
				if (this.userPage.size * this.userPage.current < this.userPage.total) {
					this.userPage.current++;

					this.listConfig.loading = 'loading';
					this.getUserCount();
				} else {
					this.userPage.loading = 'nomore';
				}
			} else {
				if (this.page.size * this.page.current < this.page.total) {
					this.listConfig.loading = 'loading';
					this.page.size += 10;
					this.getComments();
					this.getDetail();
				} else {
					this.listConfig.loading = 'nomore';
				}
			}
		},
		navTap(item, index) {
			this.navIndex = index;

			if (index != 0) {
				this.userPage = {
					current: 1,
					size: 20,
					total: 0,
					loading: 'loading'
				};

				this.userList = [];
				this.getUserCount();
			}
		},
		getUserCount() {
			const api = this.navIndex == 1 ? getDynamicBrowse : getDynamicLike;

			api({
				dynamicId: this.detail.dynamicId,
				current: this.userPage.current,
				size: this.userPage.size
			}).then((res) => {
				this.userList = this.userList.concat(res.data.list);
				this.userPage.total = res.data.total;
				const { total, current, size } = res.data;

				if (total < current * size) {
					this.userPage.loading = 'nomore';
				}
			});
		},
		// 跳转名片详情
		goCard(item) {
			this.$pageTo('/CardDetails?id=' + item.memberId);
		},
		// 进入话题详情
		goTotic(id) {
			if (id) {
				this.$pageTo('/circle/topicDetails?id=' + id);
			} else {
				this.$pageTo('/circle/topicDetails?id=' + this.detail.topicId);
			}
		},
		// 进入圈子
		goCircle() {
			this.$pageTo('/circle?id=' + this.detail.groupId);
		},
		puperBounced() {
			this.$refs.notLogin.openLogin({
				show: true,
				bottom: '160rpx',
				position: 'bottom'
			});
		},
		// 判断是否登录
		judgeIsLogin() {
			const { bw_user_temp, bw_params } = getApp().getBWData(['bw_params', 'bw_user_temp']);
			if (bw_params && bw_params.access_token && bw_user_temp && bw_user_temp.memberId) {
				return true;
			} else {
				return false;
			}
		},
		// 是否收藏
		collectionDd() {
			if (!this.judgeIsLogin()) {
				this.$refs.notLogin.openLogin({
					show: true,
					position: 'center'
				});
				return;
			}
			const obj = {
				akey: '',
				businessId: this.detail.dynamicId,
				collectionType: '2',
				sourceId: ''
			};
			if (this.detail.isCollection == 0) {
				// 未收藏
				collectionCard({
					...obj
				}).then((res) => {
					this.detail.isCollection = 1;
					this.detail.collectionCount++;
				});
			} else {
				collectioncCancel({
					collectionId: this.detail.dynamicId
				}).then((res) => {
					this.detail.isCollection = 0;
					this.detail.collectionCount--;
				});
			}
		},
		isLink() {
			if (!this.judgeIsLogin()) {
				this.$refs.notLogin.openLogin({
					show: true,
					position: 'center'
				});
				return;
			}
			let obj = {
				busMemberId: this.detail.memberId,
				businessId: this.detail.dynamicId,
				memberId: this.userInfo.memberId
			};
			let api = this.detail.isLike == 0 ? circleLikeV2 : circleUnlikeV2;
			let funcObj = {
				0: () => {
					this.detail.isLike = 1;
					this.detail.likeNum++;
				},
				1: () => {
					this.detail.isLike = 0;
					this.detail.likeNum--;
				}
			};
			api({
				...obj
			}).then((res) => {
				funcObj[this.detail.isLike]();
			});
		},
		scrollDd(e) {
			this.toView = '';
			this.scrollTop = e.detail.scrollTop;
		},
		// 改变滚动条
		scrollChange() {
			if (this.scrollTop <= 60) {
				this.toView = 'space-back';
			} else {
				this.toView = 'space-top';
				// this.scrollTop = 0;
			}
		},
		closePuperBottom() {
			this.plShow = false;
			this.plContent = '';
		},
		// 打开评论弹框
		openComments() {
			if (!this.judgeIsLogin()) {
				this.$refs.notLogin.openLogin({
					show: true,
					position: 'center'
				});
				return;
			}
			this.plShow = true;
			this.fbType = false;
			this.placeholderContent = '请发表优质评论！';
		},
		plClose() {
			this.plShow = false;
		},
		fbContent(data) {
			if (!this.judgeIsLogin()) {
				this.$refs.notLogin.openLogin({
					show: true,
					position: 'center'
				});
				return;
			}
			this.plShow = true;
			this.fbType = true;
			this.plDetail = data;
			this.placeholderContent = `回复@${data.realName}`;
		},
		fbMyContent() {
			if (!this.plContent) {
				uni.showToast({
					title: '请输入评论内容！',
					icon: 'error'
				});
				return;
			}
			uni.showLoading({
				mask: true,
				title: '发表中...'
			});
			if (this.fbType) {
				this.commentReply();
			} else {
				this.addComments();
			}
		},
		// 回复别人的评论
		commentReply() {
			let obj = {
				avatar: this.userInfo.avatar,
				commentId: this.plDetail.commentId,
				memberId: this.userInfo.memberId,
				realName: this.userInfo.realName,
				replyContent: this.plContent,
				replyMemberId: this.plDetail.memberId,
				replyRealName: this.plDetail.realName,
				replyType: '0'
			};
			commentReply({
				...obj
			}).then((res) => {
				uni.showToast({
					icon: 'none',
					title: '评论成功'
				});

				this.getComments();
				this.getDetail();
				this.plShow = false;
				this.plContent = '';
				// uni.hideLoading();
			});
		},
		//发表评论
		addComments() {
			let obj = {
				avatar: this.userInfo.avatar,
				commentContent: this.plContent,
				dynamicId: this.detail.dynamicId,
				isForward: 0,
				memberId: this.userInfo.memberId,
				realName: this.userInfo.realName,
				terminalDevice: ''
			};
			addComment({
				...obj
			}).then((res) => {
				uni.showToast({
					icon: 'none',
					title: '评论成功'
				});

				this.getComments();
				this.getDetail();
				this.plContent = '';
				this.plShow = false;
				// uni.hideLoading();
			});
		},
		// 关注
		attention(type) {
			if (!this.judgeIsLogin()) {
				this.$refs.notLogin.openLogin({
					show: true,
					position: 'center'
				});
				return;
			}
			let message = type == 0 ? '已关注' : '取消关注';
			if (type == 0) {
				// 未关注
				addAttention({
					othersId: this.detail.memberId
				}).then((res) => {
					uni.showToast({
						icon: 'none',
						title: message
					});
					this.detail.isFollow = type == 0 ? 1 : 0;
				});
			} else {
				let memberIdList = [this.detail.memberId];
				manageAttention({
					memberIdList: memberIdList
				}).then((res) => {
					uni.showToast({
						icon: 'none',
						title: message
					});
					this.detail.isFollow = type == 0 ? 1 : 0;
				});
			}
		},
		// 获取评论列表
		getComments() {
			getDynamicComments({
				...this.page,
				isHeatSort: 1,
				dynamicId: this.id
			}).then((res) => {
				this.comments = res.data.list;
				this.page.total = res.data.total;
				this.isShow = true;
				uni.hideLoading();
			});
		},
		// 格式化数据
		formDataNum(item) {
			return item > 10000 ? (item / 10000).toFixed(1) + 'w' : item;
		},
		// 详情
		getDetail() {
			getDynamicDetails({
				dynamicId: this.id
			}).then((res) => {
				if (res.data) {
					const _picture = res.data.picture;
					if (_picture) {
						res.data.picture = _picture.split(',');
					}
					this.detail = res.data;
					if (this.detail.pictures.length == 1 && this.detail.pictureType != '3') {
						this.getImgData();
					}
					uni.hideLoading();
				}
			});
		},
		// 查看图片
		picPreview(urls, index) {
			uni.previewImage({
				urls: urls,
				current: index
			});
		},
		// 全屏播放事件
		fullscreenchange(e) {
			console.log('全屏---->', e.detail.fullScreen);
		}
	}
};
</script>

<style lang="scss" scoped>
.space-line {
	position: relative;
	margin: 0 10rpx;
}
.space-line::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	margin: -10rpx 0 0;
	width: 1rpx;
	height: 20rpx;
	background-color: #d0d3db;
}
.tabs-nav {
	padding: 0 20rpx;
	height: 88rpx;
	border-bottom: 1rpx solid var(--backgroundDivisionColor);
}
.tabs-nav .tabs-item {
	padding: 0 20rpx;
	height: 88rpx;
	position: relative;
}
.tabs-nav .tabs-item.active {
	font-weight: bold;
}
.tabs-nav .tabs-item.active::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -20rpx;
	width: 40rpx;
	height: 6rpx;
	border-radius: 6rpx;
	background-color: var(--titleFontColor);
	overflow: hidden;
}

.user-item {
	padding: 28rpx 40rpx;
	margin-bottom: 30rpx;
}
.user-item .avatar {
	margin-right: 24rpx;
	width: 80rpx;
	height: 80rpx;
	border-radius: 8rpx;
}
.user-item .name {
}
.user-item .job {
	margin-top: 6rpx;
}
.user-item .time {
	color: var(--contentFontLightColor);
	margin-top: 8rpx;
}

::v-deep .u-tabbar__content {
	background-color: var(--darkViewBgColor);
	border: none;
}
::v-deep .u-textarea__field {
	color: #fff;
}
::v-deep video::-webkit-media-controls-fullscreen-button {
	display: none;
}
.color-E8CDA7 {
	color: #e8cda7;
}
.dynamicForward {
	margin-top: 40rpx;
	padding: 24rpx 26rpx;
	height: 152rpx;
	border-radius: 12rpx;
	.pic {
		margin-right: 18rpx;
		width: 104rpx;
		height: 104rpx;
		border-radius: 12rpx;
		background-color: #2c2f37;
	}
	.con {
		max-height: 132rpx;
		overflow: hidden;
	}
}
.max-pic {
	width: 100%;
	// width: 670rpx;
	height: 400rpx;
	border-radius: 12rpx;
}

.page-wrap {
	// height: 100vh;
	background-color: var(--viewBgColor);
	.scroll {
		// height: calc(100vh - 185rpx);
		overflow: auto;
	}
}

.tag-groups {
	margin: 0 20rpx 16rpx 0;
	padding: 0 24rpx;
	height: 48rpx;
	border-radius: 24rpx;
}
.tag2 {
	background: #f3e2d8;
	color: #ce763f;
}
.tag1 {
	background: #ddeffa;
	color: #3a7fac;
	// margin-right: 20rpx;
}
.right {
	color: var(--contentFontFourColor);
}
.dynamic-time {
	color: var(--contentFontFourColor);
}
.puper_bottom {
	position: fixed;
	bottom: 0;
	height: 300rpx;
	background-color: var(--darkViewBgColor);
	width: 100%;
	z-index: 99999;
	padding: 20rpx;
	.text_box {
		background-color: var(--viewDivisionColor);
		color: var(--titleFontColor);
	}
	/deep/.uni-textarea-textarea {
		color: var(--titleFontColor);
	}
	.btn {
		width: 120rpx;
		float: right;
		height: 50rpx;
		margin-top: 20rpx;
		border-radius: 8rpx;
		// background: linear-gradient(270deg, #e8cda8 0%, #f4e6cf 100%);
		border: none;
		// color: #141720;
	}
}
.uTabbarBto {
	border-top: 1rpx solid var(--backgroundDivisionColor);
}
.ipt_box {
	background-color: #f4f8fb;
	height: 65rpx;
	width: 446rpx;
	color: var(--contentFontFourColor);
	padding: 20rpx;
	// margin-top: 18rpx;
	margin-left: 20rpx;
	border-radius: 8rpx;
}

.cz_right {
	color: var(--contentFontDarkColor);
}
.on {
	color: var(--contourButtonTextColor);
}
.action-item .num {
	margin-top: 8rpx;
	line-height: 34rpx;
}

.dynamic-info {
	padding: 30rpx;
}
.space-back {
	height: 24rpx;
	background-color: var(--controllerBgColor);
}
.dynamic-info .hd {
}

.color-6B707C {
	color: #6b707c;
}

.color-E8CDA7 {
	color: #e8cda7;
}

.m-right40 {
	margin-right: 40rpx;
}

.m-r10 {
	margin-right: 10rpx;
}

.dynamic-info .img1 {
	margin-right: 24rpx;
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
}

.dynamic-info .btn1 {
	width: 120rpx;
	height: 48rpx;
	background: var(--senderViewColor);
	color: var(--contentBgImageTitleColor);
	border-radius: 8rpx;
}

.dynamic-info .bd .content {
	color: var(--contentFontDarkColor);
	font-weight: 300;
	line-height: 60rpx;
}

.dynamic-info .maxImg {
	// width: 100%;
	// height: 400rpx;
	// width: 220rpx;
	// height: 276rpx;
	border-radius: 12rpx;
}

.dynamic-info .minImg {
	width: 32.33%;
	height: 223rpx;
	border-radius: 4rpx;
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}

.dynamic-info .mr0 {
	margin-right: 0;
}

.mt24 {
	margin-top: 20rpx;
}

.dynamic-info .ft {
	margin-top: 30rpx;
}
.ft .bwfont {
	margin-right: 8rpx;
	font-size: 24rpx;
	color: var(--contentFontFourColor);
}
.ft .time {
	color: var(--contentFontFourColor);
}
</style>
